import { Button, Table, Tag ,Input, message} from 'antd'
import { useEffect, useState } from 'react'
import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { getCateParams,updateParams } from '../../../api/goods'

interface PropsType {
    sel: "only" | "many",
    cate_ids: number[]
}
function TableList(props: PropsType) {
    //定义加载状态
    let [loading, setLoading] = useState(false);
    let [tableData, setTableData] = useState([]);
    let [inputValue,setInputValue] = useState("");
    let [activeIndex,setActiveIndex] = useState<number | null>(null);
    let handleInputChange = (e:any)=>{
        setInputValue(e.target.value);
    }
    let handleInputConfirm =  async (recoder:any)=>{
        // 添加属性值
        recoder.attr_vals.push(inputValue);
        console.log(recoder)
        let {cat_id,attr_id,attr_sel,attr_name,attr_vals} = recoder;
        if(attr_sel==='many'){
            attr_vals = attr_vals.join(" ")
        }else{
            attr_vals = attr_vals.join(",")
        }
        let res:ResponsType = await updateParams(cat_id,attr_id,{attr_name,attr_sel,attr_vals})
        if(res.data.meta.status === 200){
            message.success(res.data.meta.msg)
            getList(props.cate_ids[2], { sel: props.sel });
            setInputValue("");
            setActiveIndex(null)
        }

    }
    let removeTag =async (recoder:any,index:number)=>{
        let {cat_id,attr_id,attr_sel,attr_name,attr_vals} = recoder;
        attr_vals.splice(index,1);
        if(attr_sel==='many'){
            attr_vals = attr_vals.join(" ")
        }else{
            attr_vals = attr_vals.join(",")
        }
        let res:ResponsType = await updateParams(cat_id,attr_id,{attr_name,attr_sel,attr_vals})
        if(res.data.meta.status === 200){
            message.success(res.data.meta.msg)
            getList(props.cate_ids[2], { sel: props.sel });
            setInputValue("");
            setActiveIndex(null)
        }
    }
    let columns = [
        {
            dataIndex: "index",
            title: "#",
            width: 100,
            render(text: string, recoder: any, index: number) {
                return <div>{index}</div>
            }
        },
        {
            dataIndex: "attr_name",
            title: "属性名"
        },
        {
            dataIndex: "actions",
            title: "操作",
            render(text: boolean, recoder: UsersTableItem) {
                return <div>
                    <Button type='primary' size='small' icon={<EditOutlined />} >编辑</Button>&nbsp;&nbsp;
                    <Button type='primary' size='small' danger icon={<DeleteOutlined />}>删除</Button>
                </div>
            }
        },

    ]
    // 获取分类参数列表
    let getList = async (id: number, data: CateParamsSelType) => {
        setLoading(true)
        let res: ResponsType = await getCateParams(id, data);
        res.data.data.forEach((item: any) => {

            if (props.sel === 'many') {
                if (item.attr_vals === '') {
                    item.attr_vals = []
                } else {
                    item.attr_vals = item.attr_vals.split(" ")
                }
            } else {
                if (item.attr_vals === '') {
                    item.attr_vals = []
                } else {
                    item.attr_vals = item.attr_vals.split(",")
                }
            }
        })
        setTableData(res.data.data)
        setLoading(false)
        console.log(res.data.data)
    }
    useEffect(() => {
        if (props.cate_ids.length !== 0) {
            // 获取分类参数列表
            getList(props.cate_ids[2], { sel: props.sel })
        }
    }, [props.cate_ids])
    let showInput = (attr_id:number) => {
        setActiveIndex(attr_id)
    }
    return (
        <div>
            <div>
                <Button type='primary' disabled={props.cate_ids.length === 0}>{props.sel === 'many' ? '添加参数' : '添加属性'}</Button>
            </div>
            <div style={{ margin: "20px 0" }}>
                <Table bordered columns={columns} dataSource={tableData} pagination={false} rowKey='attr_id' scroll={{ x: 500 }} loading={loading} expandedRowRender={(recoder: any) => {
                    return (
                        <div>
                            {
                                recoder.attr_vals.map((item: string, index: number) => {
                                    return (
                                        <Tag color="blue" key={index} closable onClose={()=>removeTag(recoder,index)}>{item}</Tag>
                                    )
                                })
                            }
                            {
                               ( activeIndex && activeIndex === recoder.attr_id)? <Input
                               style={{width:"100px"}}
                                   type="text"
                                   size="small"
                                   value={inputValue}
                                   onChange={(e)=>handleInputChange(e)}
                                   onBlur={()=>handleInputConfirm(recoder)}
                                   onPressEnter={()=>handleInputConfirm(recoder)}
                               />:
                               <Tag onClick={()=>showInput(recoder.attr_id)}>
                               <PlusOutlined /> New Tag
                           </Tag>
                            }
                           
                           
                        </div>
                    )
                }}></Table>
            </div>
        </div>
    )
}

export default TableList;